<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" alt="" />
		<view class="f24 c2d t-c">欢迎来到零工达平台{{codes}}</view>
		<view class="f14 c15 t-c mt-10">智能管理 · 便捷服务</view>
		<view class="login d-f">
			<input v-model="phone" class="inputs" type="text" placeholder="手机号码" />
		</view>
		<view class="login d-f j-b">
			<input v-model="code" class="inputs" type="text" placeholder="验证码" />
			<text class="c2d f14 f-w"  @click="sliderVerify()">{{!captchaTime?'获取验证码':captchaTime+'s'}}</text>
		</view>
		<view class="but cff t-c f14" @click="submit">
			登录
		</view>
		<view class="f14 c15 t-c agreement d-f j-c">
			<image v-if="show" @click="show = !show" src="/static/yes.png"></image>
			<image v-if="!show" @click="show = !show" src="/static/no.png"></image>	我已阅读并同意 
			<text @click="webview" class="c2d f14">《隐私协议》</text>
		</view>
		<zmm-slider-verify ref="sliderVerify" @success="successHandle" @error="errorHandle" @close="closeHandle"></zmm-slider-verify>
	</view>
</template>

<script>
	import unis from '@/utils/util.js'
	export default {
		data() {
			return {
				phone:'',
				code:'',
				show:true,
				phoneNumber:'',
				captcha:'',
				captchaTime:0,
				show:false,
				codes:''
			}
		},
		onLoad() {
		},
		methods: {
			webview(){
				uni.navigateTo({
					url:'/pages/webview/webview?url=http://lgd.linggongda.cn/sign/privacy.html'
				})
			},
			submit(){
				var that = this
				if(!that.phone){
					uni.showToast({
					  title:'请输入手机号',
					  icon: 'none',
					  duration: 2000
					});
					return false
				}
				if(!that.code){
					uni.showToast({
					  title:'请输入验证码',
					  icon: 'none',
					  duration: 2000
					});
					return false
				}
				unis.getData('/api/member/login', 'POST', {
					mobile:that.phone,
					code:that.code
				}, function (res) {
					if(res.code == 200){
						uni.setStorageSync('token', res.data.access_token);
						console.log(uni.getStorageSync('token'))
						uni.switchTab({
							url:'/pages/home/home'
						})
					}
				});
			},
			sendCaptcha(){
				var that = this
				if(that.captchaTime > 0){
					uni.showToast({
					  title:'不能重复获取',
					  icon: 'none',
					  duration: 2000
					});
					return ;
				}
				unis.getData('/api/member/getCode', 'POST', {
					mobile:that.phone
				}, function (res) {
					if(res.code == 200){
						uni.showToast({
						  title:res.message,
						  icon: 'none',
						  duration: 2000
						});
						that.codes = res.data
						that.captchaCountdown()
					}
				});
			},
			captchaCountdown(){
				this.captchaTime = 60;
				 let timer = setInterval(()=>{
				 this.captchaTime--;
				 console.log(this.captchaTime)
				 if(this.captchaTime < 1){
					 clearInterval(timer);
					 this.captchaTime = 0
				 }
				 },1000)
			},
			onra(e){
				console.log(e);
				this.show = !this.show
			},
			//显示验证组件
			sliderVerify(){
				var that = this
				if(!that.show){
					uni.showToast({
					  title:'请先阅读同意用户协议',
					  icon: 'none',
					  duration: 2000
					});
					return ;
				}
				if(!that.phone){
					uni.showToast({
					  title:'请输入手机号',
					  icon: 'none',
					  duration: 2000
					});
					return false
				}
			    that.$refs['sliderVerify'].show()
			},
			//验证通过回调
			successHandle(e) {
			    console.log(e)
				this.sendCaptcha()
			},
			//验证失败回调
			errorHandle(e) {
			    console.log(e)
			},
			//组件关闭回调
			closeHandle(e){
			    console.log(e)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #ECF2FF;
		height: 100vh;
		.logo{
			width: 99px;
			height: 99px;
			display: block;
			padding-top: 158px;
			margin: 0px auto 45px auto;
		}
		.mt-10{
			margin-bottom: 55px;
		}
		.login{
			width: 327px;
			height: 44px;
			background: #FFFFFF;
			border-radius: 4px 4px 4px 4px;
			margin: 16px auto;
			.inputs{
				padding-left: 16px;
			}
			.c2d{
				margin-right: 19px;
			}
		}
		.but{
			width: 327px;
			height: 45px;
			background: linear-gradient( 270deg, #36A2FC 0%, #2D73FF 100%);
			border-radius: 4px 4px 4px 4px;
			margin: 25px auto 16px auto;
			line-height: 45px;
		}
	}
	.agreement{
		image{
			width: 14px;
			height: 14px;
			margin-right: 10px;
		}
	}
</style>
